<template>
  <div class="roles">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>角色列表</span>
        <!-- <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >添加用户 </el-button> -->
        <el-button
          class="qf-r qf-create-btn"
          type="primary"
          round
          @click="jump('/roles/create')"
          >创建角色</el-button
        >
      </div>
      <!-- 标题 -->

      <!-- 表格内容 -->
      <qf-table :tableData="tableData" :columns="columns"></qf-table>
      <!-- 表格内容 -->

      <!-- 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
      <!-- 分页 -->
    </el-card>

    <!-- 编辑 -->
    <Edit :state="editState" @close="editState = false"></Edit>
    <EditAuth :state="editAuthState" @close="editAuthState = false"></EditAuth>
    <!-- dialog -->

    <!-- dialog end -->
  </div>
</template>

<script>
import tableData from '~mock/roles/index.js';
import Edit from './components/Edit.vue';
import EditAuth from './components/EditAuth.vue';

export default {
  components: {
    Edit,
    EditAuth
  },
  data() {
    return {
      // 编辑数据
      editState: false,
      editAuthState: false,

      // 模型数据
      params: {
        // 分页
        pagenum: 1,
        // 搜索
        uname: '',
        date: []
      },

      // 表格数据

      columns: [
        { title: '编号', field: 'id' },
        { title: '角色名称', field: 'role_name' },
        { title: '角色描述', field: 'role_desc' },
        {
          title: '操作',
          type: 'btn',
          width: '280',
          payload: [
            {
              name: '分配权限',
              type: 'warning',
              click: (row) => {
                console.log('分配', row);
                // 1.显示
                this.editAuthState = true;
              }
            },
            {
              //   name: '编辑角色',
              icon: 'el-icon-edit',
              type: 'primary',
              click: (row) => {
                console.log('修改', row);

                // 1.显示
                this.editState = true;
              }
            },

            {
              //   name: '删除角色',
              icon: 'el-icon-delete',
              type: 'danger',
              click: (row) => this.deleteFn(row)
            }
          ]
        }
      ],
      tableData: tableData.data
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style></style>
